<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>

<div class="row">
    <div class="col-md-8">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">博客详情</h5>
                <c:if test="${sessionScope.user != null && sessionScope.user.id == blog.userId}">
                    <div>
                        <a href="${pageContext.request.contextPath}/blog/edit?id=${blog.id}" class="btn btn-sm btn-light me-2">
                            <i class="fas fa-edit me-1"></i>编辑
                        </a>
                        <button class="btn btn-sm btn-danger" onclick="confirmDelete(${blog.id})">
                            <i class="fas fa-trash me-1"></i>删除
                        </button>
                    </div>
                </c:if>
            </div>
            <div class="card-body">
                <h2 class="mb-3">${blog.title}</h2>
                
                <div class="d-flex justify-content-between mb-4">
                    <div>
                        <span class="badge bg-${blog.category == '技术' ? 'primary' : 
                                   blog.category == '生活' ? 'success' : 
                                   blog.category == '旅游' ? 'info' : 
                                   blog.category == '艺术' ? 'warning' : 'secondary'} me-2">
                            ${blog.category}
                        </span>
                        <span class="text-muted">
                            <i class="fas fa-user me-1"></i>
                            ${blog.authorName}
                        </span>
                    </div>
                    <div>
                        <span class="text-muted me-3">
                            <i class="fas fa-eye me-1"></i>
                            ${blog.viewCount}次阅读
                        </span>
                        <span class="text-muted">
                            <i class="fas fa-calendar me-1"></i>
                            <fmt:formatDate value="${blog.createTime}" pattern="yyyy-MM-dd HH:mm" />
                        </span>
                    </div>
                </div>
                
                <hr>
                
                <!-- 博客内容 -->
                <div class="blog-content markdown-content">
                    ${blog.content}
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">作者信息</h5>
            </div>
            <div class="card-body text-center">
                <div class="avatar-circle mb-3">
                    <span class="initials">${blog.authorName.substring(0, 1)}</span>
                </div>
                <h5 class="mb-3">${blog.authorName}</h5>
                <a href="${pageContext.request.contextPath}/blog/myblogs?userId=${blog.userId}" class="btn btn-outline-primary">
                    <i class="fas fa-book me-1"></i>查看该作者的更多博客
                </a>
            </div>
        </div>
        
        <!-- 热门博客 -->
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">热门博客</h5>
            </div>
            <div class="card-body">
                <c:choose>
                    <c:when test="${not empty hotBlogs}">
                        <ul class="list-group list-group-flush">
                            <c:forEach var="hotBlog" items="${hotBlogs}" varStatus="status">
                                <c:if test="${hotBlog.id != blog.id}">
                                    <a href="${pageContext.request.contextPath}/blog/view?id=${hotBlog.id}" class="list-group-item list-group-item-action px-0">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h6 class="mb-1">${hotBlog.title}</h6>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <small class="text-muted">
                                                <span class="badge bg-${hotBlog.category == '技术' ? 'primary' : 
                                                              hotBlog.category == '生活' ? 'success' : 
                                                              hotBlog.category == '旅游' ? 'info' : 
                                                              hotBlog.category == '艺术' ? 'warning' : 'secondary'}">
                                                    ${hotBlog.category}
                                                </span>
                                            </small>
                                            <small class="text-muted">
                                                <i class="fas fa-eye me-1"></i>${hotBlog.viewCount}
                                            </small>
                                        </div>
                                    </a>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </c:when>
                    <c:otherwise>
                        <p class="text-center text-muted">暂无热门博客</p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                确定要删除这篇博客吗？此操作不可恢复。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form id="deleteForm" action="${pageContext.request.contextPath}/blog/delete" method="post">
                    <input type="hidden" id="deleteId" name="id" value="${blog.id}">
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义样式 -->
<style>
.avatar-circle {
    width: 80px;
    height: 80px;
    background-color: #007bff;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.initials {
    position: relative;
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
}

.blog-content {
    line-height: 1.8;
    font-size: 1.1rem;
}

.blog-content img {
    max-width: 100%;
    height: auto;
}

.blog-content pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

.blog-content blockquote {
    border-left: 4px solid #007bff;
    padding-left: 1rem;
    color: #6c757d;
}
</style>

<script>
// 删除确认
function confirmDelete(blogId) {
    var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>

<%@ include file="/WEB-INF/jsp/common/footer.jsp" %> 